<template>
	<div>
		<el-dialog v-model="outlineData.viewOutlineDialog" title="查看大纲">
			<div class="dialog-table">
				<div class="title p-flex">
					<div>课次</div>
					<div class="p-f-1">大纲内容</div>
				</div>
				<div class="content-list">
					<div
						class="table-item p-flex"
						v-for="(item, index) in outlineData.outlineList"
						:key="index"
					>
						<div>{{ item.times }}</div>
						<div class="p-f-1">
							{{ item.outline }}
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { defineExpose, reactive, getCurrentInstance, defineProps } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
	viewType: {
		type: String,
		default: "class"    //class -- 查看班级管理大纲，  course -- 查看课程大纲
	}
})

const outlineData = reactive({
	outlineList: [],
	viewOutlineDialog: false,
});

const openDialog = async (row) => {
	if (props.viewType === 'class') {
		getClassOutlines(row)
	}
	if (props.viewType === 'course') {
		getCourseOutlines(row)
	}
	outlineData.viewOutlineDialog = true;
};
// 班级大纲
const getClassOutlines = async (row) => {
	const params = {
		gradeId: row.id,
	};
	if (row) {
		const { code, data } = await proxy.$API.calss1.outlineList.get(params);
		if (code === 200) {
			outlineData.outlineList = data;
		}
	}
}
// 课程大纲
const getCourseOutlines = async (row) => {
	const params = {
		courseId: row.id,
	};
	if (row) {
		const { code, data } = await proxy.$API.course.findByCourseId.get(params);
		if (code === 200) {
			outlineData.outlineList = data;
		}
	}
}

defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
.dialog-table {
	.title {
		height: 30px;
		color: #192942;
		background: #e7e7e7;
		border: 1px solid #cfcfcf;
		border-left: 0;
		font-size: 14px;
		& > div {
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
		& > div:nth-child(1) {
			width: 90px;
			border-right: 1px solid #cfcfcf;
			border-left: 1px solid #cfcfcf;
		}
	}
	.table-item {
		height: 40px;
		color: #192942;
		font-size: 14px;
		& > div {
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		& > div:nth-child(1) {
			width: 90px;
			border: 1px solid #cfcfcf;
			border-top: 0;
		}
		& > div:nth-child(2) {
			border-right: 1px solid #cfcfcf;
			border-bottom: 1px solid #cfcfcf;
		}
	}
}
</style>
